<template>
  <el-form ref="form" :rules="rules2" :model="form" label-width="100px">
    <el-form-item label="课程名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="选取图片" prop="banner">
      <el-input :value="form.banner" disabled>
        <template @click="innerVisible = true" slot="prepend">选取图片</template>
      </el-input>
    </el-form-item>
    <el-form-item label="课程简介">
      <el-input v-model="form.info"></el-input>
    </el-form-item>
    <el-form-item label="课程详细介绍">
      <el-input v-model="form.introduction"></el-input>
    </el-form-item>
    <el-form-item label="课程难度" prop="level">
      <el-select v-model="form.level" placeholder="请选择课程难度">
        <el-option label="level 1" value="level 1"></el-option>
        <el-option label="level 2" value="level 2"></el-option>
        <el-option label="level 3" value="level 3"></el-option>
        <el-option label="level 4" value="level 4"></el-option>
        <el-option label="level 5" value="level 5"></el-option>
        <el-option label="level 6" value="level 6"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="课程星级">
      <el-rate style="line-height: 45px;" v-model="form.difficulty"></el-rate>
    </el-form-item>
    <el-form-item label="课程标签">
      <el-tooltip class="item" effect="dark" content="按回车键完成单个标签输入" placement="top">
        <el-select
          style="display:block;"
          v-model="Tags"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择文章标签"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="课程排序">
      <el-tooltip class="item" effect="dark" content="小的在前" placement="top-start">
        <el-input-number v-model="form.paixu" :step="1"></el-input-number>
      </el-tooltip>
    </el-form-item>
    <el-tooltip class="item" effect="dark" content="为用户提供scratch模版！！！不要随便选择" placement="top-start">
      <el-form-item label="课程模版" prop="iframeid" title>
        <el-select v-model="form.iframeid" placeholder="请选择课程类型">
          <el-option label="取消选择" :value="null"></el-option>
          <el-option
            v-for="(item, index) in iframelist"
            :key="index"
            :label="item.name"
            :value="item.ID"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-tooltip>
    <el-form-item class="text-right">
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="dialog()">取消</el-button>
    </el-form-item>
    <el-dialog width="80%" title="选取图片" :visible.sync="innerVisible" append-to-body>
      <ossImglist v-bind:selected="selected"></ossImglist>
    </el-dialog>
  </el-form>
</template>

<script>
import ossImglist from "@/components/newpublic/oss.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      innerVisible: false,
      Tags: [],
      options: []
    };
  },
  props: [
    "iframelist",
    "dialog",
    "rules2",
    "form",
    "AllCatebag",
    "asyncSubmit"
  ],
  watch: {
    Tags(v) {
      if (v.length > 4) {
        this.Tags.splice(4, 1);
        this.$message("最大4条");
      }
    },
    "form.courseTag"(v) {
      this.Tags = v.split(",");
    }
  },
  mounted() {
    this.start();
  },
  computed: mapGetters(["getCourse"]),
  methods: {
    start() {
      var list = [];
      for (let a in this.getCourse) {
        if (this.getCourse[a].courseTag != null) {
          // console.log(this.getCourse[a].courseTag.split(","))
          for (let i in this.getCourse[a].courseTag.split(",")) {
            list.push(this.getCourse[a].courseTag.split(",")[i]);
          }
        }
      }
      var result = [];

      var obj = {};
      for (var i = 0; i < list.length; i++) {
        if (!obj[list[i]]) {
          result.push(list[i]);

          obj[list[i]] = true;
        }
      }
      for (let i of result) {
        var o = {
          value: i,
          label: i
        };
        this.options.push(o);
      }
    },

    async onSubmit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          this.form.courseTag = this.Tags.join(",");
          await this.asyncSubmit(this.form);
        } else {
          return false;
        }
      });
    }
  },
  components: {
    ossImglist
  }
};
</script>

<style scoped>
</style>
